<template>
  <div> 
    <ReservationTop></ReservationTop>
    <div class="reservation_box_t" style="margin-top:50px;">
      <p>联系方式</p>
        <div class="reservation_t_b" @click="goAdress" v-if=" myadress!=='' ">
            <div class="reservation_t_b_l"><i class="iconfont icon-dingwei" style="color:#333"></i></div>
            <div class="reservation_t_b_r">
                <p><span>{{myadress.linkman}}</span><span style="float:right">{{myadress.phone}}</span></p>
                <p>{{myadress.address}}</p>
            </div>        
        </div>
        <div class="reservation_t_b" @click="goAdress" v-else>
           <p>请添加收货地址</p>
        </div>
    </div>
    
    <div class="reservation_goods_lists" v-if="goods !== ''&&goods !== undefined"> 
      <div class="devivid"></div>
        <ul class="reservation_goods_lists_ul">
            <p style="margin-bottom:15px; font-size: 16px;color: #333">所选商品</p>
            <li v-for="item in goods">
                <div class="reservation_goods_lists_ul_l"><img :src=item.picurl alt=""></div>
                <div class="reservation_goods_lists_ul_r">
                    <div class="reservation_goods_lists_ul_r_t">
                        <span>{{item.name}}</span>
                        <span>￥{{item.price}}</span>
                    </div>
                    <div class="reservation_goods_lists_ul_r_b" style="text-align: right">
                        <span>X{{item.count}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="devivid"></div>
    <div class="reservationwt">
        <p>洗护类型</p>
        <ul class="reservationwt_ul">
            <li v-for="(item,index) of sever_type" @click="HandleClick(index)" :class="{ reservationwt_li_act:active == index}">{{item}}</li>
            <!--  <li>洗鞋</li>
                <li>皮具护理</li>
                <li>皮具修复</li> -->
        </ul>
    </div>
    <div class="devivid"></div>
    <div class="reservationwt">
        <p>取货时间</p>
        <ul class="reservationwt_ul1">
            <li v-for="(item,index) of time_type" @click="HandleClicktime(index)" :class="{ reservationwt_li_act:active1 == index}">{{item}}</li>
            <!--  <li>洗鞋</li>
                <li>皮具护理</li>
                <li>皮具修复</li> -->
        </ul>
    </div>
    <!-- <div class="devivid"></div> -->
    <div class="reservation_leavemessage">
        <div class="textareabox">
            <textarea name="textareaname" rows="XX" cols="XX" autoFocus placeholder="给商家留言" v-model="note">
            </textarea>
        </div>
    </div>
    <div class="reservation_submit_btn">
        <button @click="pushOrder">提交</button>
    </div>
       
  </div>
</template>
<script>
import ReservationTop from './components/ReservationTop.vue'
import { orderParam, loadAdress, submitOrder } from '@/api/allapis'
import Lockr from 'Lockr'
export default{
  name: 'Reservation',
  data(){
    return{
        active:1,//洗护类型索引
        active1:1,//取货时间索引
        adresses:'',//收货地址列表
        sever_type: [],//服务类型
        time_type: [],//时间类型
        goods:'',//传过来的所选商品
        myadress:'',//地址信息
        note:''//留言      
    }
  },
  mounted(){
  
    // console.log(this.$route.params.goods)
  },
  methods: {
    //切换洗护类型
    HandleClick: function(index) {
        this.active = index;
        // console.log(this.active);
    },
    //切换取货时间
    HandleClicktime: function(index) {
        this.active1 = index;
        // console.log(this.active);
    },
    //跳转到地址选择页面
    goAdress(){
      // console.log(1)
      this.$router.push({
        name:'Adresses',
        query:{
          goto:'1'//goto为1时是从预约页面跳转到我的地址页面
        }
      })
    },
    //拉取地址列表，取得默认地址
    loadAdress(){
        loadAdress().then(response=>{
          if(response.data.list !== ''){  
            this.adresses = response.data.list
            // console.log(JSON.stringify(this.adresses))
            for(var i=0; i<this.adresses.length; i++) {
                if(this.adresses[i].is_default === 1) {
                    // console.log(1)
                    this.myadress = this.adresses[i]
                    return 
                }else if (this.adresses[i].is_default === 0) {
                   // console.log(0)
                    this.myadress = this.adresses[i]
                    return 
                }
            }
          }  

        })
    },
    //拉取洗护类型及取货时间
    loadOrderPram(){
        orderParam().then(response=>{
            this.sever_type = response.data.sever_type
            this.time_type = response.data.time_type
        })
    },
    //提交订单
    pushOrder(){
        const self = this
        console.log(JSON.stringify(this.goods))
        var param = {
          address_id:this.myadress.id,
          type:this.active,
          time_type:this.active1,
          note:this.note,
          items:this.goods
        }
        submitOrder(param).then(response=>{
            // console.log(JSON.stringify(response))
            // alert(response.msg)
            this.$router.replace({
              name:'Orders'
            })
        })
    },

    // GetAdress(){
    //   loadAdress()
    // },
  },
  created(){
    // this.needpushgoods = this.$route.query.needpushgoods
    if(this.$route.query.needpushgoods === '1'){
        this.goods =Lockr.get('needpushgoods')

        // console.log(JSON.stringify(this.goods))
    }//只从商品列表页传过来数据时，才能触发拉取存储的数据，避免在其他页面点进预约页面时页面渲染出现错误
    else{
        this.goods=''
    }
    // this.myadress = this.$route.params.item
    // console.log(JSON.stringify(this.myadress))
    this.loadAdress()
    this.loadOrderPram()
  },
  components:{
    ReservationTop
  }
 
}
</script>
<style>
.ball {
    position: fixed;
    left: 35px;
    bottom: 28px;
    z-index: 9999999;
    transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}
.inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF4D4D;
  transition: all 0.4s linear;
}
</style>


